import Icon from '@/components/Icon'
import { addChannel, delChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'

const Channels = ({ onClose, index, onChange }) => {
  // 从redux中取出用户频道和推荐频道的数据
  const userChannels = useSelector((state) => state.home.userChannels)
  const recommendChannels = useSelector((state) => {
    const { userChannels, allChannels } = state.home
    return allChannels.filter((item) => {
      // 刷选出用户频道中没有的频道
      return userChannels.findIndex((i) => i.id === item.id) === -1
    })
  })

  const dispatch = useDispatch()

  // 控制高亮
  const changeChannel = (i) => {
    if (edit) return // 编辑状态切换不了
    onChange(i)
    onClose()
  }

  // 控制编辑状态
  const [edit, setEdit] = useState(false)

  // 点击删除频道
  const del = (channel, i) => {
    // console.log(channel)
    if (userChannels.length <= 4) {
      Toast.info('至少保留4个频道噢')
      return
    }
    dispatch(delChannel(channel))
    // 删除时高亮位置的处理
    // 1.如果删除频道的下标i和正在高亮的下标index相等，则高亮切换到推荐频道
    // 2.如果删除频道的小标i小于正在高亮的下标index,默认让index-1高亮
    // 3.如果删除频道的下标i小于正在高亮的下标index,不用处理
    if (i === index) {
      onChange(0)
    }
    if (i < index) {
      onChange(index - 1)
    }
  }

  // 添加推荐的频道
  const add = (channel) => {
    if (edit) return //处于编辑状态不能点击添加
    // console.log(channel)
    dispatch(addChannel(channel))
    Toast.info('添加频道成功', 1)
  }

  return (
    <div className={styles.root}>
      {/* 顶部栏关闭按钮 */}
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>

      {/* 频道列表 */}
      <div className="channel-content">
        {/* 当前已选择的频道列表 */}
        <div className={classNames('channel-item', { edit: edit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {edit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={() => setEdit(!edit)}>
              {edit ? '完成' : '编辑'}
            </span>
          </div>

          <div className="channel-list">
            {userChannels.map((item, i) => (
              <span
                className={classNames('channel-list-item', {
                  selected: index === i,
                })}
                key={item.id}
                onClick={() => changeChannel(i)}
              >
                {item.name}
                {item.id !== 0 && (
                  <Icon type="iconbtn_tag_close" onClick={() => del(item, i)} />
                )}
              </span>
            ))}
          </div>
        </div>

        {/* 推荐的频道列表 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道列表</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recommendChannels.map((item) => (
              <span
                className="channel-list-item"
                key={item.id}
                onClick={() => add(item)}
              >
                {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
